<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
</head>

<body>
<div>

  <div ng-include="headerInclude"></div>
  <div ng-controller="Apiman.ApiPlansController"
       id="page-content"
       class="page container-pf-nav-pf-vertical container-fluid"
       data-field="page"
       ng-cloak=""
       ng-show="pageState == 'loaded'">
    <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
    <!-- Entity Summary Row -->
    <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

    <!-- Navigation + Content Row -->
    <div class="row">
      <!-- Left hand nav -->
      <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
      <!-- /Left hand nav -->

      <!-- Content -->
      <div class="col-md-10 apiman-entity-content">
        <div class="col-md-10">
          <div class="title"
               apiman-i18n-key="public-api">Public API</div>
          <div>
            <span apiman-i18n-key="public-api-help">Select this option if this API should be accessible directly, without an API contract. Typically, this option is used instead of selecting plan(s).</span>
          </div>
          <div class="py-3">
            <span>
              <input ng-model="updatedApi.publicAPI"
                     type="checkbox"
                     id="public-api"
                     data-cy="public-api-checkbox"
                     ng-disabled="isEntityDisabled()">
              <label for="public-api"
                     apiman-i18n-key="make-api-public">Make this API public</label>
            </span>
            <span class="pl-4">
              <apiman-discoverability-select
                  ng-disabled="!updatedApi.publicAPI"
                  data-cy="plan-discoverability-selector-publicApi"
                  on-discoverability-change="setPublicDiscoverability"
                  initial-value="updatedApi.publicDiscoverability"
                  plan="updatedApi">
              </apiman-discoverability-select>
            </span>
          </div>
          <div class="title"
               apiman-i18n-key="available-plans">Available Plans</div>
          <div>
            <p apiman-i18n-key="available-plans-help">
              Choose which plans should be presented when client apps create a contract to this API.
              Only plans in a <strong>locked</strong> state appear in this list.
            </p>
            <p>
              Changing <strong>discoverability</strong> allows users who are not members of your organization to find and subscribe to an API.
            </p>
          </div>
          <div class="apiman-divider-40"
               ng-show="plans.length == 0">
            <div class="alert alert-warning">
              <span class="pficon pficon-info"></span>
              <span apiman-i18n-key="api-plans.no-locked-plans-found">No locked plans were found in the organization. Please create and lock at least one plan before attempting to configure them here. Or make your APIs public using the checkbox above.</span>
            </div>
          </div>

          <!-- The plans to choose from -->
          <table class="table table-striped table-bordered table-hover table-responsive" data-field="plans">
            <thead>
            <tr>
              <th>Attach</th>
              <th>Plan</th>
              <th>Plan Version</th>
              <th>Require Approval</th>
              <th>Discoverability</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="plan in plans">
              <td>
                <label>
                  <input ng-model="plan.checked"
                         data-field="checkbox"
                         data-cy="apiman-plan-enabled-checkbox-{{ plan.id }}"
                         type="checkbox"
                         ng-disabled="isEntityDisabled()">
                </label>
              </td>
              <td>
                <a href="{{ pluginName }}/orgs/{{ plan.organizationId }}/plans/{{ plan.id }}" data-field="name" title="{{ plan.description }}">{{ plan.name }}</a>
              </td>
              <td>
                <ui-select ng-model="plan.selectedVersion"
                           on-select="changedVersion($item)"
                           data-cy="apiman-plan-version-selector-{{ plan.id }}"
                           ng-disabled="isEntityDisabled() || !plan.checked"
                           class="inline-block">
                  <ui-select-match>
                    Version: <span ng-bind="$select.selected"></span>
                  </ui-select-match>
                  <ui-select-choices repeat="version in (plan.lockedVersions | filter: $select.search)">
                    <span ng-bind="version"></span>
                  </ui-select-choices>
                </ui-select>
              </td>
              <td>
                <label>
                  <input data-cy="apiman-plan-requires-approval-checkbox-{{ plan.id }}"
                         ng-model="plan.requiresApproval"
                         data-field="checkbox"
                         type="checkbox"
                         ng-disabled="isEntityDisabled() || !plan.checked">
                </label>
              </td>
              <td>
                <apiman-discoverability-select
                    ng-disabled="isEntityDisabled() || !plan.checked"
                    data-cy="plan-discoverability-selector-{{ plan.id }}"
                    on-discoverability-change="setDiscoverability"
                    initial-value="plan.discoverability"
                    plan="plan">
                </apiman-discoverability-select>
              </td>
            </tr>
            </tbody>
          </table>

          <div apiman-permission="apiEdit"
               ng-show="!isEntityDisabled()"
               class="actions">
            <button ng-disabled="!isDirty"
                    apiman-action-btn=""
                    ng-click="saveApi()"
                    class="btn btn-primary"
                    data-field="saveButton"
                    data-cy="save"
                    apiman-i18n-key="save"
                    placeholder="Saving..."
                    data-icon="fa-cog">Save</button>
            <button ng-disabled="!isDirty"
                    class="btn btn-default"
                    ng-click="reset()"
                    data-field="cancelButton"
                    data-cy="cancel"
                    apiman-i18n-key="cancel">Cancel</button>
          </div>

        </div>
      </div>
      <!-- /Content -->
    </div>
  </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
</div>
</body>
</html>
